<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglib.jsp" %>    
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script>
	//# sourceURL=orgRoleList.js

	var selRoleId = null;
	var selRoleName = null;
	
	$(document).ready(function() {
		
		// 选择表格行
		$("#gridOrgRole table > tbody > tr").click(function() {
			$("#gridOrgRole table > tbody > tr").removeClass('info');
			$(this).addClass('info');
			selRoleId = $(this)[0].id;
			selRoleName = $(this).find("td").eq(0).text();
		});
	});

	function addRole() {
		if (checkSelected('add') == false) return;
		
		$('#dialog_main').modal({
			keyboard: false,
			remote: '${ctx}/org/role/add.action?appId=${appId}'
		});
	}

	function editRole() {
		if (checkSelected() == false) return;
				
		$('#dialog_main').modal({
			keyboard: false,
			remote: '${ctx}/org/role/modify.action?roleId=' + selRoleId
		});	
	}

	function changeState(state) {
		if (checkSelected() == false) return;
		
		if(state == "Delete" && confirm('确定要删除"' + selRoleName + '"吗？') == false) {
			return;
		}
		
		var url = "${ctx}/org/role/changeState.action?roleId=" + selRoleId + "&validState=" + state;
		$.get(url, function(data) {	    				    		
			if(data == "success") {
				refreshPage();
			} else {
				alert("错误: \n" + data);
			}
		})
		.error(function(xmlHttpRequest, textStatus, errorThrown) { 
			  alert("异常： " + xmlHttpRequest.status + ":" + errorThrown);
		});
	}

	function selectApp() {
		$('#dialog_main').modal({
			keyboard: false,
			remote: '${ctx}/org/app/select.action'
		});
	}
	
	function onSelectAppEvent(appId) {
		$('#dialog_main').modal('hide');		
		loadPage(appId);	
	}		

	function checkSelected(cmd) {
		if ('${appId}' == '0') {
			alert("请选择应用");
			return false;			
		}
		
		if ((selRoleId == null) &&(cmd!='add')) {
			alert("请选择表格行");
			return false;
		}
		
		return true;
	}
	
	function dialogSubmitSuccess() {
		$('#dialog_main').modal('hide');
		refreshPage();
	}
	
    function refreshPage() {
		var url = "/org/role/manage.action?appId=${appId}";
		load_main_content(url);
    }
    
    function loadPage(appId) {
		var url = "/org/role/manage.action?appId=" + appId;
		load_main_content(url);
    } 
    
    function relateFunction(roleId) {
    	//alert("roleId :" + roleId);
		$('#dialog_main').modal({
			keyboard: false,
			remote: '${ctx}/org/role/relateFunction.action?roleId=' + roleId
		});    	
    }
        
</script>

</head>
<body>

<div>
	<c:choose>
		<c:when test="${appId == 0}"><h3>角色管理</h3></c:when>
		<c:otherwise><h3>角色管理-${appName}</h3></c:otherwise>
	</c:choose>			
</div>

<nav class="navbar navbar-default" role="navigation">
  <ul class="nav navbar-nav navbar-left">
    <li>
      <a href="javascript:selectApp()">选择</a></li>  
    <li>
      <a href="javascript:addRole()">新建</a></li>
    <li>
      <a href="javascript:editRole()">编辑</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多
        <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li>
          <a href="javascript:changeState('Invalid')">禁用</a></li>
        <li>
          <a href="javascript:changeState('Normal')">启用</a></li>
        <li class="divider"></li>          
	    <li>
	      <a href="javascript:changeState('Delete')">删除</a></li>
      </ul>
    </li>
  </ul>
</nav>

<div id="gridOrgRole" class="table-responsive">
  <table class="table table-hover table-bordered">
    <thead>
      <tr>
        <th>名称</th>
        <th>描述</th>
        <th>状态</th>
        <th>操作</th>
    </thead>
    <tbody>
		<c:forEach items="${listRole}" var="node" varStatus="status">
		  <tr id='${node.roleId}'>
			<td>${node.roleName}</td>
			<td>${node.description}</td>
			<td>${node.displayValidState}</td>
			<td><a href="javascript:relateFunction(${node.roleId})">关联功能</a></td>
		  </tr>
		</c:forEach>
    </tbody>
  </table>
</div>

<div class="clearfix">
	<div style="height:20px;background-color:white"></div>
</div>

</body>
</html>